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Here’s an explanation integrating TypeScript code to demonstrate JavaScript's asynchronous 
behavior with setTimeout, especially in the context of callback functions, promises, and 
async/await. This illustrates how asynchronous operations are handled in a simulated scenario like 
placing an order for a pizza, preparing it, and delivering it. 


Explanation with TypeScript Code 
1. Callback Functions 


o Code: 


function placeOrder(callback: () => void): void { 
console. log("Order placement started..."); 
setTimeout(() => { 
console.log("Order placed."); 
callback(); 
}, 2000); // simulates a delay 


} 


function deliverOrder(): void { 
console.log("Order is being delivered..."); 
setTimeout(() => { 
console.log("Order delivered."); 


}, 3000); 
} 
placeOrder(() => { 
deliverOrder(); 
})3 


o Explanation: This demonstrates the basic usage of callbacks to handle asynchronous 
operations. placeOrder function starts the order process, then after a simulated 
delay (using setTimeout), it completes the order and calls deliverOrder. This 
pattern can lead to callback hell if nested extensively. 


2. Promises 
o Code: 


function placeOrder(): Promise<void> { 
return new Promise((resolve, reject) => { 


console.log("Placing order..."); 
setTimeout(() => { 
console. log("Order placed."); 
resolve(); 
}, 2000); 
})3 
} 


function deliverOrder(): Promise<void> { 
return new Promise((resolve, reject) => { 
console.log("Delivering order..."); 
setTimeout(() => { 
console. log("Order delivered."); 
resolve(); 
}, 3000); 
})3 
} 


placeOrder () 
.then(() => deliverOrder()) 
.catch((error) => console.log(error) ); 


o Explanation: Promises simplify asynchronous operations and avoid callback hell. 
placeOrder returns a Promise that resolves after the order is placed. Upon 
resolution, deliverOrder is called. This chain is cleaner than nested callbacks. 


3. Async/Await 
o Code: 


async function handleOrder(): Promise<void> { 
try { 
await placeOrder(); 
await deliverOrder(); 
console.log("All operations completed."); 
} catch (error) { 
console.log("Error handling the order:", error); 
} 
} 


handleOrder() ; 


o Explanation: async/await further simplifies the syntax and improves readability. 
handleOrder is an asynchronous function that waits for each operation to complete 


before proceeding. This is much easier to read and maintain compared to nested 
callbacks or even promise chains. 


Key Takeaways 


e Callbacks are the fundamental method for handling asynchronous operations in JavaScript, 
but can lead to complex nested structures known as "callback hell." 

e Promises provide a cleaner syntax for handling asynchronous operations and allow 
chaining. 

e Async/await allows asynchronous code to be written with a synchronous flow, enhancing 
readability and maintainability. 


These concepts are crucial for managing asynchronous operations in JavaScript and TypeScript, 
ensuring that code execution aligns with the expected timelines of tasks such as database 
operations, file I/O, or API requests. 


